<template>
  <div>
    <div class="select_top">
      <el-select v-model="orgname" placeholder="单位名称" clearable>
        <el-option
          v-for="item in qtbmList"
          :key="item.hash.orgname"
          :label="item.hash.orgname"
          :value="item.hash.orgid"
        >
        </el-option>
      </el-select>
      <el-date-picker
        style="width:15%;margin-right:1%"
        v-model="year"
        type="year"
        placeholder="选择年"
        :clearable="false"
        valueFormat="yyyy"
      >
      </el-date-picker>
      <!-- <el-select v-show="isshow_month" clearable v-model="savetime" placeholder="具体时间">
        <el-option
          v-for="item in month_op"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <el-select v-model="status" clearable placeholder="本季度状态">
        <el-option
          v-for="item in status_op"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button @click="getassessList">筛选</el-button>
    </div>
    <el-table
      ref="filterTable"
      :data="assessList"
      v-loading="loading"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.orgname"
        label="单位名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.time"
        label="年度"
      >
      </el-table-column>
      <el-table-column
        label="填报时间"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.hash.status=='未完成'" style="color:red"></span>
          <span v-else>{{scope.row.hash.savetime}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="本季度状态"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.hash.status=='未完成'" style="color:red">未完成</span>
          <span v-else>已完成</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="hash.outernum"
        label="逾期数目"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            @click="goPage2(scope.row)"
            type="primary"
            size="small"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      showDetail: false,
      loading: true,
      qtbmList: [],
      property: {},
      isshow_month: true,
      month_op: [],
      assessList: [],
      orgname: '',
      savetime: '',
      status: '',
      year: '',
      status_op: [{
        value: '1',
        label: '已填报',
      }, {
        value: '0',
        label: '未填报',
      }],
    };
  },
  created() {
    // 初始化时间为当前时间
    const a = `${new Date().getFullYear()}`;
    this.year = a;

    this.getMonthOp();
    this.getQtbmList();
    this.getassessList();
  },
  methods: {
    getassessList() {
      if (this.$route.path == '/glperformance/assess') {
        const req = {
          handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BDA12E083D738952BC15B67093C8E6FE5',
          type: '1',
          aorgid: '',
          borgid: '',
          propertyid: this.$route.query.id,
          year: this.year,
          date: this.savetime,
          status: this.status,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.assessList = ts.d.data.operation1;
          this.loading = false;
        });
      } else {
        const req = {
          handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BDA12E083D738952BC15B67093C8E6FE5',
          type: '1',
          aorgid: '',
          borgid: '',
          propertyid: this.$route.query.id,
          year: this.year,
          date: this.savetime,
          status: this.status,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.assessList = ts.d.data.operation1;
          this.loading = false;
        });
      }
    },
    // 获取牵头部门列表
    getQtbmList() {
      const req = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.qtbmList = ts.d.data.operation1;
      });
    },
    // 根据指标属性获取选的月或者季
    getMonthOp() {
      // 先获取牵头部门列表
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BE133DA25EC7F9F14B5D3ABB56224205E',
        id: this.$route.query.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.property = ts.d.data.operation1[0];
        if (this.property.hash.type == '年') {
          this.isshow_month = false;
        } else if (this.property.hash.type == '月') {
          const a1 = ['一月', '二月', '三月', '四月', '五月', '六月',
            '七月', '八月', '九月', '十月', '十一月', '十二月'];
          const a2 = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
          for (let i = 0; i < a1.length; i++) {
            const ob1 = {};
            ob1.label = a1[i];
            ob1.value = a2[i];
            this.month_op.push(ob1);
          }
        } else {
          const a1 = ['第一季度', '第二季度', '第三季度', '第四季度'];
          const a2 = ['1', '2', '3', '4'];
          for (let i = 0; i < a1.length; i++) {
            const ob1 = {};
            ob1.label = a1[i];
            ob1.value = a2[i];
            this.month_op.push(ob1);
          }
        }
      });
    },

    goPage2(item) {
      if (this.$route.path == '/glperformance/assess') {
        this.$router.push({
          path: 'assess2',
          query: {
            aorgid: item.hash.aorgid, propertyid: this.$route.query.id, year: item.hash.time, name: item.hash.orgname,
          },
        });
      } else {
        this.$router.push({
          path: 'grade2',
          query: {
            aorgid: item.hash.aorgid, propertyid: this.$route.query.id, year: item.hash.time, name: item.hash.orgname,
          },
        });
      }
    },
  },
};
</script>

<style lang="stylus">
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
